<template>
  <div class="main">
    <div class="login-title">{{ config.p_title }}|{{ config.p_name }}</div>
    <a-tabs
      size="large"
      :tabBarStyle="{ textAlign: 'center' }"
      style="padding: 0 2px;"
    >
      <a-tab-pane tab="注册" key="1">
        <a-form
          id="formLogin"
          class="user-layout-login"
          ref="formLogin"
          :form="form"
          @submit="handleSubmit"
        >
          <a-form-item style="margin-top: 20px;">
            <a-input
              size="large"
              autocomplete="false"
              placeholder="请输入手机号"
              addon-before="手机号码"
              v-decorator="[
                'phone',
                {
                  rules: [{ required: true, message: '请输入手机号' }],
                  validateTrigger: 'blur'
                }
              ]"
            >
              <a-icon
                slot="prefix"
                type="lock"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>
          <a-form-item style="margin-top: 20px;">
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="请设置登录密码"
              addon-before="登录密码"
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '请设置登录密码' }],
                  validateTrigger: 'blur'
                }
              ]"
            >
              <a-icon
                slot="prefix"
                type="lock"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              size="large"
              type="text"
              addon-before="单位名称"
              placeholder="单位名称需与证照上保持一致"
              v-decorator="[
                'name',
                {
                  rules: [{ required: true, message: '请输入单位名称' }],
                  validateTrigger: 'blur'
                }
              ]"
            >
              <a-icon
                slot="prefix"
                type="user"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-row :gutter="8" style="margin: 0 -4px">
              <a-col :span="16">
                <a-input
                  size="large"
                  placeholder="验证码"
                  v-decorator="[
                    'code',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入验证码',
                          whitespace: true
                        }
                      ]
                    }
                  ]"
                >
                  <a-icon slot="prefix" type="mail" />
                </a-input>
              </a-col>
              <a-col :span="8" style="padding-left: 4px">
                <a-button class="captcha-button" size="large" @click="getCode">
                  {{ timeCount > 0 ? `剩余${timeCount}s` : "获取验证码" }}
                </a-button>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model="checked">
              我已仔细阅读并认同<a
                @click="
                  $router.push(
                    '/static?type=p_agreement&name=《会员入市协议书》'
                  )
                "
                >《会员入市协议书》</a
              ><a
                @click="
                  $router.push('/static?type=re_notice&name=《会员须知》')
                "
                >《会员须知》</a
              >
            </a-checkbox>
          </a-form-item>
          <a-form-item style="margin-top:30px">
            <a-button
              size="large"
              type="primary"
              htmlType="submit"
              class="login-button"
            >
              确定
            </a-button>
          </a-form-item>
          <div style="margin-top: -8px">
            <a @click="$router.push('/')">返回首页</a>
            <a @click="$router.push('/user/login')" style="float: right">
              使用已有账号登录
            </a>
          </div>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { register, getCode } from "@/api/account";
import { setToken } from "@/utils/auth";
import storage from "@/utils/storage";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["config"])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      timeCount: 0,
      checked: false
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    async getCode() {
      if (this.timeCount) {
        return;
      }
      this.form.validateFields(["phone"], async (err, values) => {
        if (err) {
          return;
        }

        if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(values.phone)) {
          this.$message.error("请输入正确的手机号");
          return;
        }

        this.timeCount = 60;
        const res = await getCode({ phone: values.phone, type: 1 });

        storage.setItem("CODE", res.data);

        this.timer = setInterval(() => {
          this.timeCount--;

          if (this.timeCount <= 0) {
            this.timeCount = 0;
            clearInterval(this.timer);
          }
        }, 1000);
      });
    },
    handleSubmit(e) {
      e.preventDefault();

      if (!this.checked) {
        this.$message.info("请勾选会员协议和须知");
        return;
      }

      this.form.validateFields(
        ["name", "password", "phone", "code"],
        async (err, values) => {
          if (err) {
            return;
          }

          if (values.code != storage.getItem("CODE")) {
            this.$message.error("验证码错误");
            return;
          }

          const res = await register({
            code: Number(values.code),
            users: {
              ...values
            }
          });
          setToken(res.data);

          this.$router.push({ path: "/user/register/success" });
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.user-layout-login {
  button.login-button {
    font-size: 16px;
    height: 44px;
    width: 100%;
  }
  .captcha-button {
    width: 100%;
  }
}

.login-title {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
  margin-top: -20px;
}
</style>
